iT邦幫忙

2023 iThome 鐵人賽

DAY 5
0
Modern Web

Web互動式網頁系列 第 5

DAY05 認識HTML的表格標籤與列表標籤

  • 分享至 

  • xImage
  •  

在HTML中,還有許多有趣且實用的標籤與使用者互動的元素,今天要來介紹表格標籤與列表標籤。
馬上來看看吧!

一、表格標籤<table>, <tr>, <th>, <td>

分成:

  • <table>表格標籤: 用於包裝整個表格呈現二維的資料表資訊。

  • <th>表頭單元標籤: 用於標示表格的列名或標題,位於表格的頂部。

  • <tr>表格橫列標籤: 用於定義表格中的橫列數量。

  • <td>表格直行標籤: 用於定義表格中的直行數量。

  • 範例:

<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>25</td>
  </tr>
  <tr>
    <td>小華</td>
    <td>30</td>
  </tr>
</table>

二、列表清單標籤<ul>, <ol>, <li>, <dl>, <dt>, <dd>

分成:

  • 無序列表 (unordered lists) <ul>, <li>
    用於顯示項目之間無特定順序的清單。每項以圓點、方塊或其他自訂符號來標記。
    範例:
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>
  • 有序列表 (ordered lists) <ol>, <li>
    用於按特定順序排列的項目。每項都有一個數字或編號。
    範例:
<ol>
  <li>第一個項目</li>
  <li>第二個項目</li>
  <li>第三個項目</li>
</ol>
  • 定義列表 (definition lists) <dl>, <dt>, <dd>
    用於將名稱與相應的註釋、描述關聯在一起。
    定義名稱用 <dt> 標籤,相應的註釋則用 <dd> 標籤這樣。
    範例:
<dl>
  <dt>第一個項目</dt>
  <dd>第一項說明</dd>
  <dt>第二個項目</dt>
  <dd>第二項說明</dd>
  <dt>第三個項目</dt>
  <dd>第三項說明</dd>
</dl>

介紹到這邊,謝謝觀看!


上一篇
DAY04 認識HTML的基本標籤
下一篇
DAY06 認識HTML的表單標籤
系列文
Web互動式網頁30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言